<template>
  <div class="wrap">
    <div class="form">
      <div class="title">{{ action }}</div>
      <el-steps
        :active="active"
        finish-status="success"
        align-center
        space="260px"
      >
        <el-step title="基本资料"></el-step>
        <el-step title="详细资料"></el-step>
        <el-step title="兴趣爱好"></el-step>
        <el-step title="择偶标准"></el-step>
      </el-steps>
      <step1 v-if="active == 1" :info="info" @onSubmit="next"   />
      <step2 v-if="active == 2" :info="info" @onSubmit="next"  @onBack="prev" />
      <step3 v-if="active == 3" :info="info" @onSubmit="next"  @onBack="prev" />
      <step4 v-if="active == 4" :info="info" @onSubmit="next"  @onBack="prev" />
    </div>
  </div>
</template>

<script>
export default {
  name: "IndexView",
  data() {
    return {
      action:'',
      active: 1,
      info: {
        member_sn: "",
        avatar: "",
        photo: "",
        nickname: "",
        mobile: "",
        gender: 1, //：1-男 2-女
        birthday: "",
        marriage_status: "",
        nation: "",
        education: "",
        address: "",
        income: "",
        height: "",
        weight: "",
        native_place: "",
        child_situation: "",
        house_purchase_situation: "",
        car_purchase_situation: "",
        soliloquy: "",
        dish: "",
        celebrity: "",
        song: "",
        something: "",
        age_scope: [20, 40],
        height_scope: [170, 185],
        income_scope: "",
        choose_marriage_status: "",
        choose_education: "",
        work_area: "",
        choose_child_situation: "",
        smoke: 0,
        drink: 0,
      },
    };
  },
  components: {
    step1: () => import("./step1.vue"),
    step2: () => import("./step2.vue"),
    step3: () => import("./step3.vue"),
    step4: () => import("./step4.vue"),
  },
  mounted() {
    this.info.member_sn = this.$route.query.member_sn;
    if(this.info.member_sn)
    {
      this.action = '编辑会员资料'
      this.getInfo();
    }else{
      this.action = '添加会员资料'
    }
    
  },
  methods: {
    getInfo() {
      this.$post("user/member_detail", { member_sn: this.info.member_sn }).then(
        (res) => {
          this.info = res.data;
        }
      );
    },
    next(form) {
      this.info = form;
      if (this.active++ > 3) this.active = 4;
    },
    prev(form) {
      this.info = form;
      if (this.active-- < 2) this.active = 1;
    },
  },
};
</script>

<style scoped lang="scss">
.form {
  background: #fff;
  border: 1px solid #ebebeb;
  margin: 40px 0;
}
.title {
  line-height: 70px;
  font-size: 20px;
  color: #333333;
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 30px;
  position: relative;
  padding-left: 24px;
  &::before {
    content: "";
    width: 4px;
    height: 18px;
    background: linear-gradient(-89deg, #ef3e91, #f4743c);

    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}
.el-steps {
  justify-content: center;
  padding: 10px 0;
}
:deep .el-step__head.is-success {
  color: #ef3e91;
  border-color: #ef3e91;
}
:deep .el-step__title.is-success {
  color: #ef3e91;
}
:deep .el-step__title.is-wait,
:deep .el-step__title.is-process {
  color: #333333;
  font-weight: normal;
}
:deep .el-step__head.is-wait,
:deep .el-step__head.is-process {
  color: #939eb2;
  border-color: #939eb2;
}
@media screen and (max-width: 768px) {
  .title {
    line-height: 50px;
    font-size: 16px;
    margin-bottom: 20px;
    padding-left: 20px;
  }
  :deep .el-step__title {
    font-size: 13px;
  }
}
</style>
